Overlapping sub-levels in CSS dropdown menu

[empk]

Hi,
I've written a code for css drop-down menu which has 3 sub-levels. But I find that the 3rd sub-levels are overlapped. My code is as under.

Code snippet
*****************

<li><a class="hide" href="#nogo" title="Query ">QUERY &gt;<!--[if gte IE 7]><!--></a><!--<![endif]--> 
        <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
       <li><a class="hide" href="#nogo">By Books Of A/c. »<!--[if gte IE 7]><!--></a><!--<![endif]--> 
           <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
           <li><a href="#nogo" >TRANSACTIONS</a></li>
           <li><a href="#nogo" >A/CS.OPENED</a></li>
               <li><a href="#nogo" >A/CS.CLOSED</a></li>
           </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
       </li>
 
       <li><a class="hide" href="#nogo" >By Posting Id »<!--[if gte IE 7]><!--></a><!--<![endif]-->
          <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
          <li><a href="#nogo" title="Transactions">TRANSACTIONS</a></li>
          <li><a href="#nogo" title="A/cs.opened">A/CS.OPENED</a></li>
              <li><a href="#nogo" title="A/cs.closed">A/CS.CLOSED</a></li>
          </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
 
              </ul>
       </li>
</li>

Menu displayed by code above
***********************************
QUERY > By Books of A/c. >> Transactions
By Posting Id >> Transactions
A/cs.Opened
A/cs.Closed


The intended drop down style
*************************************
QUERY > By Books of A/c. >> Transactions
A/cs.Opened
A/cs.Closed
By Posting Id >> Transactions
A/cs.Opened
A/cs.Closed
Can someone throw some light as to where am going wrong.

Thanks in advance,
empk.